<template>
    <div style="color: #fff; ">
        <div style="padding: 15px;">
            <div v-for="(i, c) in taskList" :key="c">
                <div style="text-align: left;margin-bottom: 10px;">{{ i.title }}</div>
                <div class="task" @click="taskClick(item)" v-for="(item, index) in i.list" :key="index">
                    <div>
                        <img :src="item.logUrl" style="width: 38px;height: 38px;border-radius: 50%;" />
                    </div>
                    <div style="width: 75%;text-align: left;">
                        <div style="font-size: 13px;">{{ item.describe }}</div>
                        <div style="display: flex;align-items: center; font-size: 10px;margin-top: 6px;">
                            <img style="width: 20px;height: 20px;" src="../static/img/bi.png">
                            <label style="font-size: 13px;">{{ addCommas(item.points) }}</label>
                        </div>
                    </div>
                    <div>
                        <el-icon size="13" color="#C1E3FF"><ArrowRightBold /></el-icon>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- <div style="margin-bottom: 80px;"></div> -->


        <div v-if="drawer" style="bottom: 0;width: 100%; background: rgb(27, 32, 37);border-top-right-radius: 20px;border-top-left-radius: 20px;position: fixed;z-index: 1000;">
                <div style="padding: 20px;">
                  
                    <div style="display: flex;justify-content: space-between;line-height: 40px; align-items: center;">
                        <div style="font-size: 26px; color:#fff" v-if="type !=4 ">{{ title }}</div>
                        <div style="font-size: 26px; color:#fff ;width: 71%;text-align: right;" v-else>{{ title }}</div>

                        <el-icon color="#fff" @click="drawer = false"><CloseBold /></el-icon>
                    </div>
                     <div class="successful" v-if="success">
                <div class="successful_icon">
                    <img src="../static/img/annotation-check.png" mode="" />
                </div>
                <div class="successful_title">Review in progress</div>
                 </div>
      
                    <div style="text-align: left;width: 100%;" v-else>
                        <div v-if="type == 4" style="color: #fff;margin-bottom: 20px; font-size: 14px;text-align: center;">Check in daily to collect your daily rewards</div>
                        <div v-else  style="color: #fff;font-size: 14px;margin-bottom: 10px;margin-top: 20px;">{{ title1 }}</div>
                        <div v-if="type > 4" >
                            <input style="background-color:rgba(255, 255, 255, 0.16);"  v-model="postContent" />
                        </div>
                        <div v-if="title3&&type!=4" style="font-size: 11px;margin-top: 10px;color: #BDBDBD;">{{ title3 }}</div>
                        
                        <div v-if="type == 4">
                            <sigin :cumulateDays="cumulateDays"></sigin>
                        </div>
                        <div class="sbumit_bnt" size="default" type="default" hover-class="is-hover" @click="signInHandel">{{ btnTxt }}</div>
                    </div>
                </div>
            </div>

       <div v-if="onx" style="bottom: 0;width: 100%; background: rgb(27, 32, 37);border-top-right-radius: 20px;border-top-left-radius: 20px;position: fixed;z-index: 1000;">
            <div style="padding: 20px;">
               <div style="display: flex;justify-content: space-between;height: 40px;line-height: 40px;align-items: center;">
                 <div style="font-size: 26px; color:#fff" >Follow on X</div>
                 <el-icon color="#fff" @click="onx = false"><CloseBold /></el-icon>
               </div>
               <div>
                <div class="gobtn" @click="goUrlX">Go to X Page</div>
                <div style="font-size: 10px;">Follow on X account username must match TG bot username</div>
                <div class="gobtn" v-loading="loading" @click="Check">Check</div>

               </div>
            </div>
        </div>
    </div>
</template>

<script>
import sigin from './sigin.vue'
import Api from '../api/api'
import { ElMessage } from 'element-plus'

export default {
    components: {
        sigin
    },
    props: {
        taskList: {
            type: Array,
            defalut:() => []
        },
         cumulateDays: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            title: '',
            title1: '',
            title2: 'Attach a screenshot of your operation',
            title3:"X post username must match TG bot username ",
            drawer: false,
            type: '',
            btnTxt: 'Claim',
            imgUrl: '',
            postContent: '',
            success: false,
            headers: {
                'Authorization':localStorage.getItem('token')
            },
            fileList: [],
            ids: '',
            onx: false,
            loading: false,
            urlX:''
        }
    },
    mounted() {
        let type = localStorage.getItem('type')
        if(type == 3) this.onx = true
    },
    methods: {
        goUrlX() {
            window.location.href = this.urlX
        },
        Check() {
            this.loading = true
            Api.post('taskrecord/followX', { taskId: this.ids, taskType: 3 }).then(res => {
                if (res.code == 200) {
                    localStorage.setItem('type',0)
                    setTimeout(() => {
                        ElMessage({ message: 'Mission completed', type: 'success' });
                        this.loading = false
                        this.onx = false
                    },2000)
                }
            })
        },
        channelTask() {
            Api.post('taskrecord/followX', { taskId: this.ids, taskType: 1 })
        },
        addCommas(number) {
            return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        },

        onSuccess(file) {
            console.log('onSuccess', file)
            if (file.code == 200) {
                this.imgUrl = file.data
            }
        },
        handlePreview(file) {
            console.log('handlePreview',file)
        },
        handleRemove(file) {
            console.log('handleRemove',fiel)
        },
        beforeRemove(e) {
            console.log(e,'beforeRemove')
        },
        handleExceed(files, uploadFiles) {
            console.log('files, uploadFiles', files, uploadFiles)
        },
        updateFile() {
            
        },
        signInHandel(type) {
            this.$emit('signInHandel', type)
            if (this.type == 4 && this.cumulateDays.length <=10) {
                console.log('签到')
                this.setsignrecord()
                return
            }
            if(this.postContent == '') return ElMessage({message:'Please enter parameters',type:'error'})
            this.settaskrecord()
        },
        // 签到
        setsignrecord() {
            Api.post('signrecord/user').then(res => {
                if (res.code == 200) {
                    ElMessage({ message: 'signing success.', type: 'success' })
                    this.getsignrecord()
                    this.drawer = false
                }
            })
        },
        getsignrecord() {
            Api.get('signrecord/user').then(res => {
                console.log('获取签到记录', res)
                if (res.code == 200) {
                    if (res.data.cumulateDays <= 0) {
                        this.cumulateDays.push(res.data.cumulateDays)
                        console.log('签到记录', JSON.stringify(this.cumulateDays))
                        return
                    }
                    for (var i = 0; i < res.data.cumulateDays; i++) {
                        this.cumulateDays.push(i + 1)
                    }
                    console.log('签到记录', JSON.stringify(this.cumulateDays))
                }
            })
        },
        taskClick(item) {
            this.ids = item.id
            if (item.status == 1) return ElMessage({ message: 'Task in progress', type: 'warning' });
            if (item.status == 2) return ElMessage({ message: 'Mission completed', type: 'success' });
            this.success = false
            this.type = item.type
            if (item.type == 2) {
                window.location.href = item.url
                this.channelTask()
            }
            if (item.type == 3) {
                localStorage.setItem('type',item.type)
                this.onx = true
                this.urlX = item.url
                return
            }
            if (item.type > 3 && item.type < 9) {
                this.drawer = true
                if (item.type == 4) {
                    this.title = item.describe.split(';')[0]
                    this.btnTxt = 'Claim'
                    
                }
                if (item.type == 5) {
                    this.title = 'Submit X Post'
                    this.title1 = 'Submit X post link'
                    this.title3 = 'X post username must match TG bot username '
                    this.btnTxt = 'Send Link'
                }
                 if (item.type >5 && item.type < 9) {
                    this.title = item.describe.split(';')[0]
                    this.title1 = 'Submit X post link'
                    this.title3 = 'X post username must match TG bot username '
                    this.btnTxt = 'Sumbit'
                }
             
                return 
            }
            
            if (item.type == 9) {
                
                this.$emit('gameIndex', 2)
                return
            }
            
            this.settaskrecord()
            window.location.href = item.url
            // this.$router.push('/video?url='+ item.url)
        },
        settaskrecord() {
            // if(this.imgUrl == '') return ElMessage({message:'Please upload screenshot',type:'error'})
            Api.post('taskrecord/add', {
                imgUrl: this.imgUrl,
                taskType: Number(this.type),
                postContent: this.postContent,
                taskId:Number(this.ids)
            }).then(res => {
                if (res.code == 200) {
                    this.success = true
                    this.imgUrl = ''
                    this.fileList = []
                    this.postContent = ''
                   
                }
            })
        },
        handleClose() {
            console.log('dadada')
            this.drawer = false
            this.success = false
            this.title = ''
            this.imgUrl = ''
            this.postContent = ''
        }
        
    }
}
</script>

<style>
.el-loading-mask {
    background-color: var(--el-mask-color);
    bottom: 0;
    left: 0;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity var(--el-transition-duration);
    z-index: 2000;
    border-radius: 10px;
    background:  #C1E3FF;
}
</style>


<style lang="scss" scoped>

.gobtn{
    border-radius: 10px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-family: 'Inter';
    font-weight: 600;
    background: #C1E3FF;
    color:#000;
    width: 200px;
    margin: 30px auto;
}
.successful{
    width: 100%;
    padding: 50px 0;
    .successful_icon{
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
            width: 24px;
            height: 24px;
            background-repeat: no-repeat;
            background-size: cover;
        }
    }
    .successful_title{
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-family: Inter;
        font-size: 15px;
        font-weight: 500;
        color: #fff;
        letter-spacing: -0.4000000059604645px;
        text-align: center;

    }
}
.ins{
    height: 30px;
    line-height: 30px;
    background-color:rgba(255, 255, 255, 0.16);
    padding: 5px;
    border-radius: 5px;
    width: 96%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}
input{
    border: none;
    height: 30px;
    line-height: 30px;
    color: #fff;
    background-color:rgba(255, 255, 255, 0.16);
    padding: 5px;
    border-radius: 5px;
    width: 96%;
}
 .sbumit_bnt{
    width: 100%;
    color: #000;
    background-color:  #C1E3FF;
    border-color: rgba(193, 227, 255, 1);
    margin-bottom: 30px;
    margin-top: 30px;
    border-radius: 10px;
    line-height: 50px;
    font-family: 'Inter';
    font-size: 17px;
    font-weight: 600;
    height: 50px;
    text-align: center;

}
.task{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #546C7F33;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 10px;
    img{
        margin-right: 6px;
    }
}
</style>